<script setup lang="ts">
import Hls from "hls.js";
import Artplayer from "artplayer";
import artplayerPluginHlsControl from "artplayer-plugin-hls-control";
import { onUnmounted, watch, onMounted, ref } from "vue";
import { videoStore, videoStoreHook } from "@/store/module/video";

defineOptions({
  name: "NewVideo"
});
const props = defineProps({
  video: {}
});
const player = ref<Artplayer>();

const startArt = () => {
  player.value = new Artplayer({
    container: ".new-video",
    // url: "",
    url: videoStoreHook().currentPlayer.video?.vodPlayUrl
      ? videoStoreHook().currentPlayer.video?.vodPlayUrl
      : "",
    poster: videoStoreHook().video.banner.url,
    lang: "zh-cn",
    fullscreen: true,
    autoplay: true,
    pip: true,
    muted: true,
    playbackRate: true,
    subtitleOffset: true,
    hotkey: true,
    fastForward: true,
    autoOrientation: true,
    setting: true,
    autoMini: true,
    miniProgressBar: true,
    plugins: [
      artplayerPluginHlsControl({
        quality: {
          control: true,
          setting: true,
          getName: level => level.height + "P",
          // I18n
          title: "视频质量",
          auto: "自动"
        }
      })
    ],
    customType: {
      m3u8: function playM3u8(video, url, art) {
        if (Hls.isSupported()) {
          if (art.hls) art.hls.destroy();
          // let retryTimes = 0;
          const hls = new Hls();
          hls.config.fragLoadPolicy.default.errorRetry = {
            maxNumRetry: 0,
            retryDelayMs: 1000,
            maxRetryDelayMs: 15000,
            backoff: "exponential"
          };
          hls.loadSource(url);
          hls.attachMedia(video);
          hls.on(Hls.Events.MEDIA_ATTACHED, () => {
            art.poster = "";
            hls.on(Hls.Events.ERROR, (event, data) => {
              if (data.fatal) {
                switch (data.type) {
                  case Hls.ErrorTypes.NETWORK_ERROR:
                    setTimeout(() => {
                      // if(retryTimes >= 5){
                      //   art.notice.show = '视频缓冲失败请等待或点击刷新按钮重试';
                      // }
                      hls.startLoad();
                      // retryTimes++;
                    }, 1000);
                    break;
                  case Hls.ErrorTypes.MEDIA_ERROR:
                    hls.recoverMediaError();
                    break;
                  default:
                    // cannot recover
                    hls.destroy();
                    break;
                }
              }
            });
          });
          art.hls = hls;
          art.on("destroy", () => hls.destroy());
        } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
          video.src = url;
        } else {
          art.notice.show = "Unsupported playback format: m3u8";
        }
      }
    }
  });
  player.value.on("ready", () => {
    console.log(videoStoreHook().currentPlayer);
    if (videoStoreHook().currentPlayer.time) {
      player.value.seek = videoStoreHook().currentPlayer.time;
    }
    if (videoStoreHook().currentPlayer.playing === true) {
      player.value.play();
    }
  });
  player.value.on("video:timeupdate", () => {
    videoStore().CHANGE_CURRENT_PLAYER_TIME(player.value.currentTime);
  });
};
watch(
  () => videoStore().currentPlayer.video,
  n => {
    player.value.switchUrl(videoStore().currentPlayer.video.vodPlayUrl);
  }
);
onMounted(() => {
  startArt();
});

onUnmounted(() => {
  player.value.destroy();
});
</script>

<template>
  <div class="new-video" />
</template>

<style scoped lang="css">
.new-video {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #0b1e15;
}
</style>
